<template>
  <div id="secondary">
    <k-dialog
      :show-hide.sync="secondaryData.show"
      :modal-append-to-body="false"
      :append-to-body="true"
      :show-foot="false"
      :two-btn="true"
      :title="secondaryData.type == 1 ? '自定义价格修改' : '折扣修改'"
      :close-fun="close"
      @click="saveSecondary"
    >
      <div class="secondary-main">
        <div v-show="secondaryData.data.upperStatus" class="text">
          修改后，{{ secondaryData.name }}自定义价格高于原自定义价格的3倍，是否确认继续修改？</div>
        <div v-show="secondaryData.data.lowStatus" class="text">
          修改后，{{ secondaryData.name }}自定义价格低于原自定义价格的0.33倍，是否确认继续修改？</div>
        <div v-show="secondaryData.data.boxNames && secondaryData.data.boxNames.length > 0" class="text">
          修改后，{{ secondaryData.name }} <span v-show="secondaryData.type == 1">所在的</span>箱子
          <div class="hide">
            <el-tooltip class="item" effect="dark" :content="strFilter(secondaryData.data.boxNames)" placement="bottom">
              <p>{{ strFilter(secondaryData.data.boxNames) }}</p>
            </el-tooltip>
            <i
              v-clipboard:copy="strFilter(secondaryData.data.boxNames)"
              v-clipboard:success="copy"
              v-clipboard:error="onError"
              style="margin-left: 4px; cursor: pointer;"
              class="el-icon-document-copy"
            />
          </div>
          抽水为负，是否确认继续修改？
        </div>
      </div>
    </k-dialog>
  </div>
</template>

<script>
import { updateGoodsPrice } from '@/api/babylib/platformlib/listdata'
import {
  updateActivityData,
  saveActivityData
} from '@/api/activity'
import {
  mapGetters
} from 'vuex'
export default {
  name: 'Secondary',
  data() {
    return {}
  },
  methods: {
    strFilter(arr) {
      if (arr) {
        return arr.toString()
      }
    },

    saveSecondary() {
      if (this.secondaryData.type == 1) {
        updateGoodsPrice({ id: this.secondaryData.info.id, customPrice: this.secondaryData.info.customPrice, readyStatus: true }).then(res => {
          this.$message.success('修改成功')
          this.close()
        })
      } else if (this.secondaryData.type == 2) {
        const data = JSON.parse(JSON.stringify(this.secondaryData.info))
        data.readyStatus = true
        data.rollIds = JSON.stringify(data.rollIds)
        data.iconIds = JSON.stringify(data.iconIds)
        data.envelopeIds = JSON.stringify(data.envelopeIds)
        data.boxIds = JSON.stringify(data.boxIds)
        if (data.mergeMaterialJson) {
          const arr = data.mergeMaterialJson.concat()
          let list = []
          list = arr.map(item => {
            return {
              goods_cn_name: item.goodsName,
              id: item.goodsId,
              num: item.size
            }
          })
          data.mergeMaterialJson = JSON.stringify(list)
        }
        updateActivityData(data).then(res => {
          this.$message.success('保存成功')
          this.close()
        })
      } else if (this.secondaryData.type == 3) {
        const data = JSON.parse(JSON.stringify(this.secondaryData.info))
        data.readyStatus = true
        data.rollIds = JSON.stringify(data.rollIds)
        data.iconIds = JSON.stringify(data.iconIds)
        data.envelopeIds = JSON.stringify(data.envelopeIds)
        data.boxIds = JSON.stringify(data.boxIds)
        saveActivityData(data).then(res => {
          this.$message.success('保存成功')
          this.close()
          this.$emit('determine')
        })
      }
    },

    close() {
      const data = {
        show: false,
        type: '',
        name: '',
        data: {},
        info: {}
      }
      this.$store.commit('secondary/SET_SECONDARYDATA', data)
      this.$emit('reset')
    },

    copy(e) {
      this.$message.success('复制成功')
    },
    onError(e) {
      this.$message.error('复制失败')
    }

  },
  computed: {
    ...mapGetters(['secondaryData'])
  }
}
</script>

<style lang="scss" scoped>
	.secondary-main {
		width: 800px;
		min-height: 240px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;

		.text {
			width: 100%;
			font-size: 18px;
			text-align: center;
			p {
				width: 100%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				color: #3b425d;
			}
			.hide{
				display: flex;
				justify-content: center;
				align-items: center;
				p{
					width: auto;
					max-width: calc(100% - 50px);
				}
			}
		}
	}
</style>
